<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>课工场论坛列表</title>
    <link href="css/bbs.css" rel="stylesheet">
</head>
<body>
<div class="bbs">
    <header><span onclick="postMessage()">我要发帖</span></header>
    <section>
        <ul id="postdiplay"></ul>
    </section>
    <div class="post" id="postlist">
        <input class="title" placeholder="请输入标题（1-50个字符）" id="postTitle">
        所属版块：<select id="choiceBK"><option>请选择版块</option><option>电子书籍</option><option>新课来了</option><option>新手报到</option><option>职业规划</option></select>
        <textarea class="content"></textarea>
        <input class="btn" value="发布" onclick="release()">
    </div>
    <script type="text/javascript">
    	function postMessage(){
    		document.getElementById("postlist").style.display="block";
    	}
    	function release(){
    		var title=document.getElementById("postTitle").value;
    		var bk=document.getElementById("choiceBK").value;
    		var today=new Date();
    		var time="发表时间："+today.getFullYear()+"-"+today.getMonth()+"-"+today.getDate()+"&nbsp"+
    		today.getHours()+":"+today.getMinutes();
    		var pictures=["images/tou01.jpg","images/tou02.jpg","images/tou03.jpg","images/tou04.jpg"];
    		var choice=Math.floor(Math.random()*4);
    		var picture=null;
    		switch(choice){
    			case 0:
    			picture=pictures[0];
    			break;
    			case 1:
    			picture=pictures[1];
    			break;
    			case 2:
    			picture=pictures[2];
    			break;
    			case 3:
    			picture=pictures[3];
    			break;
    		}
    		var newLi=document.createElement("li");//新建一个li节点
    		var img=document.createElement("img");//新建一个头像
    		img.setAttribute("src",picture);
    		var h1title=document.createElement("h1");//新建一个标题
    		h1title.innerHTML=title;
    		var text=document.createElement("p");//新建信息
    		text.innerHTML=bk+"&nbsp"+time;
    		newLi.appendChild(img);
    		newLi.appendChild(h1title);
    		newLi.appendChild(text);
    		var fistPost=document.getElementById("postdiplay").firstChild;
    		if(fistPost==null){
    			document.getElementById("postdiplay").appendChild(newLi);
    		}else{
    			document.getElementById("postdiplay").insertBefore(newLi);
    		}
    		document.getElementById("postlist").style.display="none";
    		document.getElementById("postlist").firstElementChild.value="";
    		document.getElementById("choiceBK").value="";
    		document.getElementById("postlist").lastElementChild.previousElementSibling.value="";
    	}
    </script>
</div>
</body>
</html>